<template>
	<view>
		<view class="user-section">
			<text class="bg-upload-btn yticon icon-paizhao">钱包余额:</text>
			<text class="balance yticon icon-paizhao">20.00</text>
		</view>
		<view class="user-change">
			<text class="change" @eventClick="navTo('/pages/balance/balance')">充值余额</text>
			<text class="tixian">申请提现</text>
		</view>
		<view class="user-tg">
			<text class="tg yticon icon-paizhao">推广金额:15.00</text>
		</view>
		<view class="user-tc">
			<text class="bg-upload-btn yticon icon-paizhao">用户提成:</text>
			<text class="balance yticon icon-paizhao">5.00</text>
		</view>
		<view class="user-tc">
			<text class="bg-upload-btn yticon icon-paizhao">推广提成:</text>
			<text class="balance yticon icon-paizhao">10.00</text>
		</view>
	</view>
	
</template>

<script>
	import {  
	    mapState,  
	    mapMutations  
	} from 'vuex';  
	export default {
		data() {
			return {
				
			};
		},
		computed:{
			...mapState(['userInfo']),
		}
	}
</script>

<style lang="scss">
	page{
		background: $page-color-base;
	}
	.user-section{
		display:flex;
		align-items:center;
		justify-content: center;
		height: 220upx;
		padding: 40upx 30upx 0;
		position:relative;
		.bg{
			position:absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			filter: blur(1px);
			opacity: .7;
		}
		.portrait-box{
			width: 200upx;
			height: 200upx;
			border:6upx solid #fff;
			border-radius: 50%;
			position:relative;
			z-index: 2;
		}
		.portrait{
			position: relative;
			width: 100%;
			height: 100%;
			border-radius: 50%;
		}
		.yticon{
			position:absolute;
			line-height: 1;
			z-index: 5;
			font-size: 40upx;
			padding: 4upx 6upx;
		}
		.pt-upload-btn{
			right: 0;
			bottom: 10upx;
		}
		.bg-upload-btn{
			left:60upx;
			top: 66upx;
		}
		.balance{
			font-size: 60upx;
			left:60upx;
			top: 126upx;
		}
		
	}
.change{
	font-size: 28upx;
			position:absolute;
			top:126upx;
			right:200upx;
			background:red;
			padding:10upx 20upx;
			color:#fff;
			margin:0 20upx;
		}
		.tixian{
			font-size: 28upx;
					position:absolute;
					top:126upx;
					right:40upx;
					border:1upx solid;
					padding:10upx 20upx;
					margin:0 20upx;
				}
				
			.user-tg{
				background: #fff;
				margin-top: 50upx;
				padding:38upx 0;
				border-bottom: 1upx solid #f1f1f1;
			}
			.tg{
				font-size: 40upx;
				padding:30upx 60upx;
			}
			.user-tc{
				width: 50%;
				float: left;
				display:flex;
				align-items:center;
				justify-content: center;
				height: 220upx;
				padding: 40upx 30upx 0;
				position:relative;
				}
				.user-tc .balance{
					font-size: 40upx;
				}

</style>
